<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到小行星书城~</title>
    <base href="${pageContext.request.contextPath }/">
    <link id="favicon" rel="shortcut icon" href="favicon.ico" type="image/svg+xml">
    <link rel="stylesheet" type="text/css" href="css/common/commonutils.css">
    <link rel="stylesheet" type="text/css" href="css/index/head.css">
    <link rel="stylesheet" type="text/css" href="css/index/top.css">
    <link rel="stylesheet" type="text/css" href="css/index/content.css">
    <link rel="stylesheet" type="text/css" href="css/index/foot.css">
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
</head>

<body>
    <!-- 头部内容 -->
    <div id="head">
        <!-- 最上方的导航栏 -->
        <div id="navigation">
            <ul>
                <c:if test="${empty sessionScope.user }">
                	<li style="margin-right: 30px;">您好，请先登录~</li>
                </c:if>
                <c:if test="${not empty sessionScope.user }">              
                	<li style="margin-right: 30px;">欢迎您，${sessionScope.user.name }</li>
                </c:if>
                <li>当前所在地：地球村</li>
            </ul>
            
            <ul>
                <li>
                    <i id="shoping_cart_logo"></i>
                    <a href="shoppingcart">购物车</a>
                    <b class="shoping_cart_num">${sessionScope.shoppingNum}</b>
                </li>
                <li>|</li>
                <li><a href="orders">我的订单</a></li>
                <li>|</li>
                <li id="my_home"><a href="">我的钱包</a><i>您的余额:${sessionScope.user.balance }</i></li>
                <li>|</li>
                <c:if test="${empty sessionScope.user }">
                	<li><a href="login">登录</a></li>
                </c:if>
                <c:if test="${not empty sessionScope.user }">
                	<li><a href="exit">注销</a></li>
                </c:if>
                <li>|</li>
                <li><a href="register">注册</a></li>
            </ul>
        </div>
    </div>
    <!-- logo图片和搜索框 -->
    <div id="logo_line">
            <a href=""><img id="logo" src="images/uugai.com_1604756139381.png" /></a>
        <div id="search">
            <form>
                <input type="text" />
                <input type="submit" value="" />
            </form>
            <div id="searchbottom">
               	热搜:
                <a href="#">安徒生童话</a>
                <a href="#">三体</a>
                <a href="#">python</a>
            </div>
        </div>
        <!-- 设置购物车和订单 -->
        <div id="cart_order">
            <div id="lib_cart">
                <a href="shoppingcart">
                    <i class="cart_logo"></i>
                   	 购物车
                    <b class="shoping_cart_num">
                    <c:if test="${empty sessionScope.shoppingNum}">0</c:if>
                    <c:if test="${not empty sessionScope.shoppingNum}">${sessionScope.shoppingNum}</c:if>
                    </b>
                </a>
            </div>
            <div id="lib_order">
                <a href="orders">
                    <i id="cart_logo"></i>
                    	我的订单
                </a>
            </div>
        </div>
    </div>
    <!-- 菜单栏 -->
    <div id="menu">
        <ul>
            <li>全部分类</li>
            <!-- 拿到前面八个分类名 -->
            <c:forEach items="${requestScope.categoryByCLevel }" var="category" begin="0" end="7">           		
            		<li><a href="category/${category.id }">${category.name }</a></li>
            </c:forEach>
        </ul>
    </div>
    <!-- 制作分类和轮播图部分 -->
    <div id="top_background">
	    <div id="top">
	        <!-- 分类部分 -->
	        <div id="category">
	            <ul>
	            	<c:forEach items="${requestScope.bookCategoryByLabel }" var="categoryList">
	            		<li>
	            		<c:forEach items="${categoryList.value }" var="category" varStatus="categoryStatus">
		            			<a href="category/${category.id }">${category.name }</a><c:if test="${not categoryStatus.last }">、</c:if>
	            		</c:forEach>
	            		</li>
	            	</c:forEach>
	                     </ul>
	            <!-- 弹出来的分类菜单 -->
	            <div>
	                <!-- 标题部分 -->
	                <div id="category_title"><span>图书、童书</span></div>
	                <!-- 内容部分 -->
	                <div id="category_content">
	                    <div>
	                        <p>排行榜</p>
	                        <ul>
	                            <li><a href="#">图书畅销榜</a></li>
	                            <li><a href="#">图书畅销榜</a></li>
	                            <li><a href="#">图书畅销榜</a></li>
	                            <li><a href="#">图书畅销榜</a></li>
	                            <li><a href="#">图书畅销榜</a></li>
	                        </ul>
	                    </div>
	                </div>
	            </div>
	        </div>
	        <!-- 轮播图和下面部分 -->
	        <div>
	            <!-- 轮播图 -->
	            <div id="slide_show">
	                <ul id="slide_pic">
	                    <li>
	                        <a href="#"><img src="images/KLvEwPY7.png" /></a>
	                    </li>
	                    <li>
	                        <a href="#"><img src="images/P4Eg8OOvEB.jpg" /></a>
	                    </li>
	                    <li>
	                        <a href="#"><img src="images/1120.jpg" /></a>
	                    </li>
	                    <li>
	                        <a href="#"><img src="images/1120 (1).jpg" /></a>
	                    </li>
	                </ul>
	                <ol></ol>
	                <div id="leftRight">
	                    <span class="left">&lt;</span>
	                    <span class="right">&gt;</span>
	                </div>
	            </div>
	            <!-- 轮播图下面的小图片 -->
	            <div id="slide_bottom">
	            	<c:forEach items="${requestScope.masterwork}" var="mwork">
	            		<a href="book/${mwork.id }"><img src="${mwork.image }"> </a>
	            	</c:forEach>
	            </div>
	        </div>
	        <!-- 右边的公告部分 -->
	        <div id="notice">
	            <img src="images/202X195-1604397388.jpg" />
	            <!-- 公告 -->
	            <div id="advert">
	                <ul>
	                    <li class="active">信息公告</li>
	                    <li>服务公告</li>
	                </ul>
	                <ul>
	                    <li><a href="#">30万图书，5折封顶</a></li>
	                    <li><a href="#">电子书限时特惠，49元5本</a></li>
	                    <li><a href="#">热风大牌日，限时2双3折</a></li>
	
	                </ul>
	
	            </div>
	        </div>
	    </div>
    </div>
    <!-- 制作内容区 -->
    <div id="content">
        <!-- 十二张图片 -->
        <div id="recommend">推荐</div>
        <div id="content_recommend">
            <c:forEach items="${requestScope.recommendBooks }" var="book">     
            <div class="info">
                <a href="book/${book.id}"><img src="${book.image}"></a>
                <div class="name"><a href="book/${book.id}">${book.title }</a></div>
                <div class="price">
                   	 秒杀价：￥
                    <span><fmt:formatNumber type="number" pattern="0.00" value="${ book.price * book.discount / 10}" ></fmt:formatNumber></span>
                    <span class="del">${book.price }</span>
                </div>
            </div>    
            </c:forEach>  
         </div>      
      <!-- 内容部分，用来放置分页图书 -->
	
        <div id="content_book">
            <div>
                <div id="book">图书</div>
                <div class="content_pic">
	                <c:forEach items="${requestScope.contentLEight }" var="book">
	            	<a href="book/${book.id }"><img src="${book.image }"></a>
	            	</c:forEach>
                </div>
            </div>
            <div>
                <div class="rank"><span>图书畅销榜</span><span>童书畅销榜</span></div>
                <div id="rank_content">
                	<c:forEach items="${requestScope.contentRank }" var="rank" varStatus="rankStatus">
                		<div><span>${rankStatus.index + 1}</span><span><a href="book/${rank.id }">${rank.title }${rank.title }</a></span></div>
                	</c:forEach>
                </div>
            </div>
        </div>

        <div id="ebook">电子书</div>
        <div id="content_ebook">
            <div id="ebook_pic">
            	<c:forEach items="${requestScope.ebookLEight }" var="book">
	            	<a href="book/${book.id }"><img src="${book.image }"></a>
	            	</c:forEach>
            </div>
        </div>

        <div id="obook">网络文学</div>
        <div id="content_obook">
            <div id="obook_pic">
                <c:forEach items="${requestScope.obookLEight }" var="book">
	            	<a href="book/${book.id }"><img src="${book.image }"></a>
	            	</c:forEach>
            </div>
        </div>

        <div id="sport">运动户外</div>
        <div id="content_sport">
            <div id="sport_pic">
               <img src="images/kingdom-1063.png">
            	<p>施工中~</p>
            </div>
        </div>

        <div id="house">家居</div>
        <div id="content_house">
            <div id="house_pic">
                <img src="images/kingdom-1063.png">
            	<p>施工中~</p>
            </div>
        </div>

        <div id="food">食品</div>
        <div id="content_food">
            <div id="food_pic">
                <img src="images/kingdom-1063.png">
            	<p>施工中~</p>
            </div>
        </div>

        <div id="emall">电器城</div>
        <div id="content_emall">
            <div id="emall_pic">
            	<img src="images/kingdom-1063.png">
            	<p>施工中~</p>
             </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div id="footer">Copyright 2020 由小行星个人制作的图书网站</div>
    <script type="text/javascript" src="js/index/slide_show.js"></script>
    <script type="text/javascript" src="js/index/category_banner.js"></script>
</body>

</html>